<template>
  <ElMenu
    :default-active="selectedKey"
    :class="getMenuClass"
    :collapse="collapse"
    :mode="mode"
    :collapse-transition="false"
    @select="handleMenuClick"
  >
    <template v-for="item in items" :key="item.path">
      <BasicSubMenuItem :item="item" />
    </template>
  </ElMenu>
</template>
<script lang="ts" setup>
import { computed, watch, unref, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import type { RouteLocationNormalizedLoaded } from 'vue-router';

import BasicSubMenuItem from './components/basic-sub-menu-item.vue';
import { isFunction } from 'lodash-es';
import { basicProps } from './props';
import { getGlobalCls } from '@/utils/index';

const props = defineProps(basicProps);
const { mode, collapse, items } = toRefs(props);
const { currentRoute } = useRouter();
const selectedKey = ref('');

const { prefixCls } = getGlobalCls('basic-menu');

const getMenuClass = computed(() => {
  return [prefixCls];
});
const handleMenuClick = (key: string) => {
  const { onMenuClick } = props;
  if (onMenuClick && isFunction(onMenuClick)) {
    onMenuClick(key);
  }
};

async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
  const path = (route || unref(currentRoute)).path;
  console.log('path', path);
  selectedKey.value = path;
}

watch(
  () => currentRoute.value,
  () => handleMenuChange(currentRoute.value),
  {
    immediate: true
  }
);
</script>
<style lang="scss">
@import url('./index.scss');
</style>
